<template>
    <div :class="store.isLeftPanelCollapsed ? 'w-0' : 'w-80'"
        class="border-r border-gray-300 flex flex-col transition-all duration-300">
        <!-- 标签页（仅在展开时显示） -->
        <div v-if="!store.isLeftPanelCollapsed" class="flex border-b border-gray-300 flex-shrink-0">
            <button v-if="store.addressList.length > 0" @click="store.setActiveTab('list')"
                :class="['flex-1 py-2 px-3 text-xs font-medium', store.activeTab === 'list' ? 'bg-blue-50 text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700']">
                地址 ({{ store.addressList.length }})
            </button>
            <button @click="store.setActiveTab('search')"
                :class="[store.addressList.length > 0 ? 'flex-1' : 'flex-1', 'py-2 px-3 text-xs font-medium', store.activeTab === 'search' ? 'bg-blue-50 text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700']">
                搜索
            </button>
            <button @click="store.setActiveTab('settings')"
                :class="[store.addressList.length > 0 ? 'flex-1' : 'flex-1', 'py-2 px-3 text-xs font-medium', store.activeTab === 'settings' ? 'bg-blue-50 text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700']">
                设置
            </button>
        </div>

        <!-- 内容区域 -->
        <div v-if="!store.isLeftPanelCollapsed" class="flex-1 flex flex-col min-h-0">
            <AddressList v-if="store.activeTab === 'list'" />
            <SearchPanel v-if="store.activeTab === 'search'" />
            <SettingsPanel v-if="store.activeTab === 'settings'" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { useMapStore } from '../store'
import AddressList from './AddressList.vue'
import SearchPanel from './SearchPanel.vue'
import SettingsPanel from './SettingsPanel.vue'

const store = useMapStore()
</script>
